<template>
    <div>
        <p style="display: flex; align-items: center;padding: 0; margin: 0;">
            <el-button type="primary" style="margin: 10px;" @click="adduser()">添加用户</el-button>
            <!-- <el-button type="primary" :icon="Upload" style="margin: 10px;" @click="sjdc()">数据导出</el-button> -->
        </p>
        <el-table id="tableId" height="82vh" border fit stripe style="width: 100%" :data="pageList" :header-cell-style="{
                background: '#ccc', color: '#000000'
            }" :row-class-name="tableRowClassName">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column show-overflow-tooltip width="100" label="序号" align="center">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip min-width=20 prop="names" label="名字" align="center" />
            <el-table-column show-overflow-tooltip min-width=20 prop="department" label="部门" align="center" :filters="[
                { text: '数据一部', value: 1 },
                { text: '数据二部', value: 2 },
                { text: '数据三部', value: 3 },
                { text: '数据四部', value: 4 },
                { text: '数据五部', value: 5 },
                { text: '办公室', value: 6 },
                { text: '其他', value: 7 },

            ]" :filter-method="filterHandler">
                <template #default="scope">
                    <span v-if="scope.row.department == 1">数据一部</span>
                    <span v-if="scope.row.department == 2">数据二部</span>
                    <span v-if="scope.row.department == 3">数据三部</span>
                    <span v-if="scope.row.department == 4">数据四部</span>
                    <span v-if="scope.row.department == 5">数据五部</span>
                    <span v-if="scope.row.department == 6">办公室</span>
                    <span v-if="scope.row.department == 7">其他</span>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip min-width=20 prop="position" label="职位" align="center">
                <template #default="scope">
                    <span v-if="scope.row.position == 0">项目负责人</span>
                    <span v-if="scope.row.position == 1">部门经理</span>
                    <!-- <span v-if="scope.row.position == 2">管理</span> -->
                    <span v-if="scope.row.position == 2">高级管理</span>
                </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip min-width=20 prop="permissionId" label="权限" align="center">
                <template #default="scope">
                    <span v-if="scope.row.permissionId == 1">数据一部</span>
                    <span v-if="scope.row.permissionId == 2">数据二部</span>
                    <span v-if="scope.row.permissionId == 3">数据三部</span>
                    <span v-if="scope.row.permissionId == 4">数据四部</span>
                    <span v-if="scope.row.permissionId == 5">数据五部</span>
                    <span v-if="scope.row.permissionId == 6">办公室</span>
                    <span v-if="scope.row.permissionId == 7">其他</span>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" align="center" width="200" fixed="right">
                <template #default="scope">
                    <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
                        icon-color="#626AEF" title="确定要删除这条数据吗?" @confirm="del(scope.row.id)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination style="padding: 8px;;" v-model:current-page="page" v-model:page-size="pageSize"
            :page-sizes="[10, 50, 500, 10000,]" layout="total, sizes, prev, pager, next, jumper" :total="list.length"
            :background="true" />
        <!-- 添加弹出 -->
        <el-drawer v-if="drawer2" v-model="drawer2" direction="ltr" size="30%" @close="close">
            <template #header>
                <!-- <h4>修改</h4> -->
            </template>
            <template #default>
                <div>
                    <addVue></addVue>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <!-- <el-button type="primary" @click="confirmClick">confirm</el-button> -->
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
import { defineProps, onMounted, ref, computed } from 'vue';
import { gettables, gettablebm, getzslist, getuser, deluser } from '../../sevce/user'
import { ElMessage } from 'element-plus'
import addVue from './add.vue';
import { Search, Plus, User, ArrowDown, InfoFilled } from '@element-plus/icons-vue'
//获取数据
let list = ref([])
function gettable() {
    getuser().then((res) => {
        list.value = res.data
    })
}
//删除
function del(id) {
    // console.log(id)
    deluser(id).then((res) => {
        if (res.data == 0) {
            ElMessage.error('删除失败')
        } else if (res.data == 1) {
            ElMessage({
                message: '已删除',
                type: 'success',
            })
            gettable()
        }
    })
}
//添加弹框
const drawer2 = ref(false)
function cancelClick() {
    drawer2.value = false

}
function close() {
    gettable()
}
//
function adduser() {
    drawer2.value = true
}
//分页
const pageSize = ref(50)
let page = ref(1)
let pageList = computed(() => {
    return list.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value);
})
onMounted(() => {
    gettable()
})
//斑马纹颜色
function tableRowClassName({ row, rowIndex }) {
    if (rowIndex % 2 !== 0) {
        return 'el-table__row--striped'
    }
}
//类型筛选
const filterHandler = (value, row, column) => {
    const property = column['property']
    return row[property] === value
}
</script>

<style lang="scss" scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}

::v-deep .el-table__body tr.el-table__row--striped td {
    background-color: #c0c4cc;
}

::v-deep .el-table__row {
    background: skyblue;
}

::v-deep .el-table__body tr:hover>td {
    background-color: #c0c4cc !important;
}
</style>